---
title: Images
version: v4
---

## Overview

This guide explains how to change Product Images dimensions and different storage options for [ActiveStorage](https://edgeguides.rubyonrails.org/active_storage_overview.html) which is the default attachment storage system in Spree.


## Dimensions

To change the default image dimensions or add new ones you need to create a decorator file:

```bash
mkdir -p app/models/spree && touch app/models/spree/image_decorator.rb
```

with the following content:

```ruby
module Spree
  module ImageDecorator
    module ClassMethods
      def styles
        {
          # change existing default sizes used in Admin Panel and API
          mini:    '48x48>',
          small:   '100x100>',
          product: '240x240>',
          large:   '600x600>', 
          # add your new size here, which will be automatically available in the API
          my_custom_size: '1000x1000>'
        }
      end
    end

    def self.prepended(base)
      base.inheritance_column = nil
      base.singleton_class.prepend ClassMethods
    end
  end

  Image.prepend(ImageDecorator)
end
```

## Using image variations in templates

You can also create [image variations on the fly in your templates](https://guides.rubyonrails.org/active_storage_overview.html), eg.

```erb
<%= image_tag(main_app.url_for(@product.images.first.attachment.variant(resize: '150x150'))) %>
```

## Storage service

By default Spree will use the storage service you have set in your environment file eg. `config/environments/development.rb`:

```ruby
config.active_storage.service = :amazon
```

If you have multiple storage services you can customize which storage service to use for images. This is done in the `config/initializers/spree.rb`:

```ruby
Spree.public_storage_service_name = :amazon
```

The storage name needs to match the name you configured in `config/storage.yml`.

## Using CDNs

To use a CDN service such as AWS Cloudfront or Cloudflare, you need to set `Spree.cdn_host` to the hostname of your CDN service. This is done in the `config/initializers/spree.rb`:

```ruby
Spree.cdn_host = 'https://mycloudfrontserviceid.cloudfront.net'
```

Spree will handle the rest as we have a built-in reverse proxy for ActiveStorage.

To use CDN in your templates please use `cdn_image_url` helper:

```erb
<%= main_app.cdn_image_url(@product.images.first.attachment.variant(resize: '150x150')) %>
```
